import { InterHolographic } from 'datau-chart';
import React from 'react';
function myReactComponent(props){
  
    // console.log(props)
  // useEffect(() => {
  //       // count 每次变动都接监听到
  //       console.log('message', message);
  //   }, [message])
  function childClickHandle() {
    // console.log(778,ODAnalysisJSSDK)
  }
  
  let value = ''
  let classI = ''
  let textColor = 'FFF'
  const pluginData = InterHolographic.utils.getStreetsData({streets: props.data.streets})
  return (
      <div>
        <InterHolographic
          width={props.data.width}
          height={props.data.height}
          panZoomConfig={
            {defaultZoom: 0.25}
          }
          background= {'rgb(60, 78, 95)'}
          center={{ 'x': 0.5, 'y': 0.5 }}
          roadStyles={
            { 
              fontSize: 26,
              textColor: textColor,
              lane:{ //车道
                choose: { //选中状态（高亮）
                  color: props.data.chooseColor || "#008CFF" //车道颜色
                }
              }
            }
          }
          data={{
            streets: props.data.data.streets,
            
            selectLaneIds: props.data.data.selectLaneIds || [],
            // center:{x: 0.5, y: 0.6}
          }}
          // isShowPhase={true}
          isEditIns={true}
          isEditOut={true}
        >
          {/* <InterHolographic.Plugin origin='cross' coordinate={{ x: 0, y: 0 }} rotateadjust='0'>
            <div style={{width: 'max-content'}}  id='test'>
              <div className={classI+ ' '+'reactIcon'}>{value}</div>
            </div>
          </InterHolographic.Plugin> */}
          {
            pluginData.map((item, index) => {
              const { ins } = item
              return ins.map((v,i) => {
                return !v.nonMontor &&(
                  <InterHolographic.Plugin key={`${index}_${i}`} origin={`ins_${index}_${i}`} coordinate={{ x: 0, y: -70 }} rotateadjust={0}>
                    <div style={{width: 'max-content'}} id={`ins_${index}_${i}`}>
                      <div style={{color: '#fff',fontSize:16}}>进口道{i+1}</div>
                    </div>
                  </InterHolographic.Plugin>
                )
              })
            })
          }
          {
            pluginData.map((item, index) => {
              const { ins, outs } = item
              const datas = new Array(outs).fill(1)
              return datas.map((v,i) => {
                return i && (
                  <InterHolographic.Plugin key={`${index}_${i}`} origin={`out_${index}_${i}`} coordinate={{ x: 0, y: -70 }} rotateadjust={0}>
                    <div style={{width: 'max-content'}} id={`out_${index}_${i}`}>
                      <div style={{color: '#fff',fontSize: 16}}>出口道{i}</div>
                    </div>
                  </InterHolographic.Plugin>
                )
              })
            })
          }
        </InterHolographic> 
      </div>
    )
  }
  export default myReactComponent